<template>
<div id="app">
    <div class="container">
        <div class="logo">后台管理系统</div>
        <div class="header-right" @click="loginOut">退出</div>
    </div>
    <div class="left-nav">
        <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#393d49"
            active-text-color="#ffd04b"
            :unique-opened="true"
            text-color="#dfdee2">
            <template v-for="(item, index) in routeList">
                <el-submenu v-if="item.children.length !== 0" :index="'0' + index" :key="index">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.title}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item
                            v-for="(item1, index1) in item.children"
                            :index="item1.url"
                            :key="index1">{{item1.title}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <template v-else>
                    <el-menu-item :index="item.url" :key="index">
                        <i class="el-icon-setting"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
    <router-view class="page-content" v-if="isLogin"/>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data () {
        return {
            isLogin: false
        }
    },

    mounted () {
        this.$store.dispatch('adminIsLogin').then(res => {
            if (res.code !== 200) {
                this.$router.push({ path: '/login' })
                this.isLogin = false
            } else {
                this.isLogin = true
            }
        })
    },

    methods: {
        loginOut () {
            this.$store.dispatch('adminLoginOut').then(res => {
                if (res) {
                    this.$router.push({ path: '/login' })
                }
            })
        }
    },

    computed: {
        ...mapState({
            routeList: state => state.routeList
        })
    }
}
</script>

<style lang="scss">
#app {
    .container {
        background: #393d49;
        width: 100%;
        height: 45px;
        line-height: 45px;
        .logo {
            color: #fff;
            float: left;
            font-size: 18px;
            padding-left: 20px;
            width: 200px;
        }
        .header-right {
            float: right;
            width: 100px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
    }
    .left-nav {
        position: absolute;
        top: 45px;
        bottom: 0px;
        left: 0;
        z-index: 2;
        padding-top: 10px;
        width: 220px;
        max-width: 220px;
        overflow-x: hidden;
        overflow: hidden;
        background: #393d49;
        .el-menu {
            width: 220px;
            .el-menu-item:hover {
                background: rgb(0, 150, 136) !important;
            }
            .el-submenu__title i, .el-icon-setting {
                color: #fff;
            }
            .el-menu-item.is-active {
                color: #fff;
            }
            .el-submenu__icon-arrow {
                color: #fff;
            }
        }
    }
    .page-content {
        position: absolute;
        top: 45px;
        right: 0;
        bottom: 0;
        left: 220px;
        overflow: hidden;
        z-index: 2;
        background: #f1f1f1;
        padding: 20px;
    }
}
</style>
